<%@ taglib uri='http://java.sun.com/jsp/jstl/core' prefix='c' %>

<c:url value="/records1.html" var="recordsUrl1"/>
<c:url value="/create1.html" var="addUrl1"/>
<c:url value="/update1.html" var="editUrl1"/>
<%-- <c:url value="/delete.html" var="deleteUrl"/> --%>

<html>
<head>
	<link rel="stylesheet" href="css/stylekram.css" type="text/css" />
	<link rel="stylesheet" href="css/customkram.css" type="text/css" />
	<script type="text/javascript" src="js/jquery-1.6.js"></script>
	<script type="text/javascript" src="js/cutomkramproject.js"></script>
	<script type="text/javascript" src="js/validation.js"></script>
	<script type="text/javascript" src="js/datepicker.js"></script>
	<script type="text/javascript" src="js/jqueryUI.js"></script>
	
	

	<title>User Records</title>
	
	<script type='text/javascript'>
	$(function() {
		// init
		urlHolderProject.recordsProject = '${recordsUrl1}';
		urlHolderProject.addProject = '${addUrl1}';
		urlHolderProject.editProject = '${editUrl1}';
		/* urlHolder.del = '${deleteUrl}'; */
		loadTableProject();
		
		$('#newBtnProject').click(function() { 
			toggleFormsProject('newProject');
			toggleCrudButtonsProject('hideProject');
			resetNewFormProject();
			$( '#newProjectStartDate' ).datepicker();
			$( '#newProjectEndDate' ).datepicker();
		});
		
		 $('#editBtnProject').click(function() { 
			if (hasSelected()) {
				toggleFormsProject('editProject');
				toggleCrudButtonsProject('hideProject');
				fillEditFormProject();
				$( '#editProjectStartDate' ).datepicker();
				$( '#editProjectEndDate' ).datepicker();
			}
		});
		
		$('#reloadBtnProject').click(function() { 
			loadTableProject();
		});

		/* $('#deleteBtn').click(function() {
			if (hasSelected()) { 
				submitDeleteRecord();
			}
		}); */
		
		$('#newFormProject').submit(function() {
			event.preventDefault();
			if(newformValidatorP()){
			submitNewRecordProject();
			}
		});
		
		$('#editFormProject').submit(function() {
			event.preventDefault();
			if(editformValidatorP()){
			submitUpdateRecordProject();
			}
		});

		$('#closeNewFormProject').click(function() { 
			toggleFormsProject('hideProject'); 
			toggleCrudButtonsProject('showProject');
		});
		
		$('#closeEditFormProject').click(function() { 
			toggleFormsProject('hideProject'); 
			toggleCrudButtonsProject('showProject');
		});
		
		$(function() {
			$( '#newProjectStartDate' ).datepicker();
		});
	});
	</script>
</head>

<body>
	
	<div class="ui-jqgrid-titlebar ui-widget-header ui-corner-top ui-helper-clearfix">
		<a class="ui-jqgrid-titlebar-close HeaderButton" href="javascript:void(0)" role="link" style="right: 0px;">
		<span class="ui-icon ui-icon-circle-triangle-n"></span>
		</a>
	<span class="ui-jqgrid-title">Record System</span>
</div>
	
	
	<table id='tableProjects'>
		<caption></caption>
		<thead>
			<tr>
				<th></th>
				<th>Project Id</th>
				<th>Project Name</th>
				<th>Project Start Date</th>
				<th>Project End Date</th>
			</tr>
		</thead>
	</table>
	
	<div id='controlBarProject'>
		<input type='button' value='New' id='newBtnProject' />
		<!-- <input type='button' value='Delete' id='deleteBtn' /> -->
		<input type='button' value='Edit' id='editBtnProject' />
		<input type='button' value='Reload' id='reloadBtnProject' />
	</div>
	
	<div id='newFormProject'>
		<form action="" name="newform" id="newform">
  			<fieldset>
				<legend>Create New Record</legend>
				<label for='newProjectId'>Project Id</label><input type='text' id='newProjectId'/><br/>
				<label for='newProjectName'>Project Name</label><input type='text' id='newProjectName'/><br/>
				<label for='newProjectStartDate'>Project Start Date</label><input type='text' id='newProjectStartDate'/><br/>
				<label for='newProjectEndDate'>Project End Date</label><input type='text' id='newProjectEndDate'/><br/>
				</fieldset>
			<input type='button' value='Close' id='closeNewFormProject' />
			<input type='submit' value='Submit'/>
		</form>
	</div>
	
	<div id='editFormProject'>
		<form action="" name="editform" id="editform">
  			<fieldset>
				<legend>Edit Record</legend>
				<input type='hidden' id='editProjectId'/>
				<!-- <label for='editProjectId'>Project Id</label><input type='text' id='editProjectId' /><br/> -->
				<label for='editProjectName'>Project Name</label><input type='text' id='editProjectName'/><br/>
				<label for='editProjectStartDate'>Project Start Date</label><input type='text' id='editProjectStartDate'/><br/>
				<label for='editProjectEndDate'>Project End Date</label><input type='text' id='editProjectEndDate'/><br/>
				</fieldset>
			<input type='button' value='Close' id='closeEditFormProject' />
			<input type='submit' value='Submit'/>
		</form>
	</div>
	
</body>
</html>